import { defineStore } from 'pinia'
import { nanoid } from 'nanoid'
import axios from 'axios';
import { reactive } from 'vue';

/*
1. `Store`是一个保存：**状态**、**业务逻辑** 的实体，每个组件都可以**读取**、**写入**它。
2. 它有三个概念：`state`、`getter`、`action`，相当于组件中的： `data`、 `computed` 和 `methods`。
*/

// export const useTalkStore = defineStore('talk', {
//     actions: {
//         async getLoveTalk() {
//             // 发请求，下面这行的写法是：连续解构赋值+重命名
//             let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//             // 把请求回来的字符串，包装成一个对象
//             let obj = { id: nanoid(), title }
//             // 放到数组中
//             this.talkList.unshift(obj)
//         }
//     },
//     // 真正存储数据的地方
//     state() {
//         return {
//             talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
//         }
//     }
// })

// store组合式写法
export const useTalkStore = defineStore('talk', () => {
    // talkList就是state
    const talkList = reactive(
        JSON.parse(localStorage.getItem('talkList') as string) || []
    )
    // getATalk函数相当于action
    const getATalk = async () => {
        // 发请求，下面这行的写法是：连续解构赋值+重命名
        let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        // 把请求回来的字符串，包装成一个对象
        let obj = { id: nanoid(), title }
        // 放到数组中
        talkList.unshift(obj)
    }
    return { talkList, getATalk }
})
